<!DOCTYPE html>
<html>
<head>
<title>Electromagnetic Field Diagram</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    background-color: white;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="450"></canvas>
<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  // Helper function to draw a filled arrowhead
  function drawFilledArrowhead(ctx, fromX, fromY, toX, toY, headLength) {
    const angle = Math.atan2(toY - fromY, toX - fromX);
    ctx.save();
    ctx.fillStyle = ctx.strokeStyle;
    ctx.beginPath();
    ctx.moveTo(toX, toY);
    ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
    ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
    ctx.closePath();
    ctx.fill();
    ctx.restore();
  }
  
  // Helper function to draw B-field 'x'
  function drawCross(ctx, x, y, size) {
    ctx.moveTo(x - size / 2, y - size / 2);
    ctx.lineTo(x + size / 2, y + size / 2);
    ctx.moveTo(x + size / 2, y - size / 2);
    ctx.lineTo(x - size / 2, y + size / 2);
  }

  // Clear canvas
  ctx.fillStyle = 'white';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = 'black';
  ctx.strokeStyle = 'black';
  
  // --- Start Drawing ---

  // Parameters
  const centerX = 300;
  const groundY = 370;
  const radius = 110;
  const centerY = groundY - radius;

  // 1. Draw the ground
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.moveTo(40, groundY);
  ctx.lineTo(560, groundY);
  ctx.stroke();

  // Draw hatches for the ground
  ctx.lineWidth = 1.5;
  for (let i = 50; i < 560; i += 20) {
    ctx.beginPath();
    ctx.moveTo(i, groundY);
    ctx.lineTo(i - 10, groundY + 10);
    ctx.stroke();
  }

  // Label for friction coefficient
  ctx.font = 'italic 24px Times New Roman';
  ctx.fillText('μ', 380, groundY + 35);


  // 2. Draw the ring
  ctx.lineWidth = 2.5;
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
  ctx.stroke();

  // Center point 'O'
  ctx.beginPath();
  ctx.arc(centerX, centerY, 3.5, 0, 2 * Math.PI);
  ctx.fillStyle = 'black';
  ctx.fill();
  ctx.font = 'italic 24px Times New Roman';
  ctx.fillText('O', centerX + 12, centerY + 8);

  // Radius 'R'
  ctx.lineWidth = 2;
  ctx.strokeStyle = 'black';
  const angleR = -Math.PI * (2/3); // Angle to the lower-left quadrant
  const endRX = centerX + radius * Math.cos(angleR);
  const endRY = centerY - radius * Math.sin(angleR);
  
  // Radius line
  ctx.beginPath();
  ctx.moveTo(centerX, centerY);
  ctx.lineTo(endRX, endRY);
  ctx.stroke();
  
  // Radius arrowhead
  drawFilledArrowhead(ctx, centerX, centerY, endRX, endRY, 15);

  // Label 'R'
  const midRX = centerX + (radius / 1.8) * Math.cos(angleR);
  const midRY = centerY - (radius / 1.8) * Math.sin(angleR);
  ctx.font = 'italic 28px Times New Roman';
  ctx.fillText('R', midRX - 10, midRY + 15);


  // 3. Draw B-field
  ctx.lineWidth = 2.5;
  ctx.beginPath();
  const crossSize = 18;
  drawCross(ctx, 100, 150);
  drawCross(ctx, 50, 250);
  drawCross(ctx, 100, 350);
  drawCross(ctx, 520, 150);
  drawCross(ctx, 550, 300);
  ctx.stroke();
  
  // Label 'B'
  ctx.font = 'italic 32px Times New Roman';
  ctx.fillText('B', 70, 200);

  // 4. Draw velocity vector 'v0'
  const v_startY = centerY;
  const v_startX = centerX + radius + 20;
  const v_endX = v_startX + 120;
  ctx.lineWidth = 2.5;
  ctx.strokeStyle = '#333';
  ctx.beginPath();
  ctx.moveTo(v_startX, v_startY);
  ctx.lineTo(v_endX, v_startY);
  ctx.stroke();
  drawFilledArrowhead(ctx, v_startX, v_startY, v_endX, v_startY, 18);

  // Label 'v0'
  ctx.fillStyle = 'black';
  ctx.font = 'italic 26px Times New Roman';
  ctx.fillText('v', v_endX, v_startY - 20);
  ctx.font = 'italic 18px Times New Roman';
  ctx.fillText('0', v_endX + 12, v_startY - 15);


  // 5. Add other labels
  // Labels 'm, Q'
  ctx.fillStyle = 'black';
  ctx.font = 'italic 28px Times New Roman';
  ctx.fillText('m,', centerX - 35, centerY - radius - 15);
  ctx.fillText('Q', centerX + 10, centerY - radius - 15);

  // Directional labels 'West' and 'East'
  ctx.font = '30px KaiTi';
  ctx.fillText('西', 100, 345);
  ctx.fillText('东', 520, 345);

</script>
</body>
</html>